<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100px;
            background-color: red;

            /* position: fixed; */
            position: static;
            top: 0;
            left: 0;
        }
        body{
            height: 3000px;
        }
        button{
            display: none;

            position: fixed;
            right: 30px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button><a href="#">返回顶部</a></button>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(window).scroll(function(){
            //获取卷出的高度
            // console.log($(window).scrollTop());
            //获取自身的高度
            // console.log($(".box").height());
            /* 如果卷出的高度大于自身的高度,那么就显示导航栏 */
            if($(".box").height()<$(window).scrollTop()){
                $(".box").css("position","fixed")
            }else{
                $(".box").css("position","static")
            }


            /* 返回顶部的按钮 */
            //当卷出300的时候,显示顶部的按钮
            if($(window).scrollTop() > 300){
                $("button").show(500)
            }else{
                $("button").hide(500)
            }
        })
        
        //点击按钮,滚动条返回到顶部
        // $("button").click(function(){
        //     /* 让window卷出的高度为0 */
        //     $(window).scrollTop(0)
        // })
    </script>
</body>
</html>